<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getTask } from '@/api/delivery'
	
	const loading = ref(false)
	const index = ref(0)
	const showMax = ref(2)
	const form = ref({
		shippingId: '',
		orderId: '',
		items: [],
		type: 'INGREDIENT'
	})
	
	function getData(id) {
		loading.value = true
		getTask(id).then(res => {
			let result = res.result || {items: []}
			form.value = result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function changeExpand() {
		showMax.value = showMax.value === 2? form.value.items.length : 2
	}
	function statusToText(value) {
		switch(value) {
			case 'DISHES': return '特殊菜品';
			case 'DISHES_DIY': return '个性菜品';
			case 'INGREDIENT': return '食材甄选';
			case 'DEVICE': return '办宴设备';
			case 'COMBINATION': return '组合商品';
			case 'PRESIDE': return '主持演出';
			case 'SPECIAL': return '特惠管理';
			case 'INTEGRAL': return '积分兑换';
			default: return '未知'
		}
	}
	
	onLoad((option) => {
		index.value =  Number(option.index || 0)
		let id = option.id
		if(id) getData(id)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<view class="content-title">{{index}}号配送单货品详情</view>
			<view class="box-view">
				<view class="content-title">订单号：{{form.code}}</view>
				<view class="box-tags">
					<uv-tags :text="statusToText(form.type)" borderColor="rgba(255,118,64,0.1)" bgColor="rgba(255,118,64,0.1)" color="#FF7640" size="mini"></uv-tags>
				</view>
				<view class="good-list">
					<template v-for="(item, index) in form.items" :key="item.itemId">
						<view v-if="index < showMax" class="good-box">
							<goods v-model="item.num" :img="item.image && item.image.furl" :name="item.name" :price="item.price" :specs="item.specs"
							:mode="form.type === 'INTEGRAL'? 'viewP' : 'viewM'"></goods>
							<view class="goods-detail" v-if="form.type === 'DISHES' || form.type === 'DEVICE'">
								<template v-if="item.list && item.list.length">
									<view class="goods-detail-box" v-if="item.expand">
										<view class="goods-detail-item" v-for="child in item.list" :key="child.id">
											<goods v-model="child.num" :img="child.image && child.image.furl" :name="child.name" :price="child.price"
												:specs="child.specs" mode="viewD" v-if="child.name"></goods>
											<goods v-model="child.num" mode="invalidD" v-else></goods>
										</view>
									</view>
								</template>
								<view class="goods-detail-expand" @click="changeDetailExpand(item)">
									<text class="more-text">{{ item.expand? '收起' : '查看明细详情'}}</text>
									<uv-icon :name="item.expand? 'arrow-up-fill' : 'arrow-down-fill'" color="#4E5969" size="24"></uv-icon>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="box-expand" v-if="form.items && form.items.length > 2" @click="changeExpand(item)">
					<text>查看全部</text>
					<uv-icon :name="showMax != 2 ? 'arrow-up-fill' : 'arrow-down-fill'" color="#767473" size="20"/>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-content{
			padding: 24rpx;
			.content-title{
				padding-bottom: 24rpx;
				font-weight: 600;
				font-size: var(--theme-lg);
				line-height: var(--theme-lg-line);
			}
			.box-view{
				padding: 24rpx 24rpx 0;
				border-radius: 16rpx;
				background-color: #FFFFFF;
				position: relative;
				overflow: hidden;
				.box-tags{
					position: absolute;
					top: 0;
					right: 0;
				}
				.good-list{
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					padding-bottom: 24rpx;
					.good-box{
						padding-right: 24rpx;
						background: #FAF7F7;
						border-radius: 8rpx;
					}
					.goods-detail {
						border-top: 2rpx solid #EAEAEA;
						font-size: 28rpx;
						.goods-detail-box{
							padding: 16rpx 0;
							display: flex;
							flex-direction: column;
							gap: 16rpx;
						}
						.goods-detail-expand {
							padding-top: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							gap: 20rpx;
							color: #767473;
						}
						.goods-detail-box + .goods-detail-expand{
							border-top: 2rpx solid #EAEAEA;
						}
					}
				}
				.box-expand{
					border-top: 2rpx solid #EAEAEA;
					padding: 24rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 14rpx;
					color: #767473;
				}
			}
		}
	}
</style>